<template>
	<view class="goods-comments">
        <mescroll-body ref="mescrollRef" :down="down" @down="downCallback" @up="upCallback">
            <view class="comments-info" v-for="(comment, index) in commentsList" :key="index">
                <view class="u-flex u-row-between">
                    <view class="u-flex">
                        <view class="u-m-r-26">
                            <u-image width="70" height="70" shape="circle" :src="comment.member_face"></u-image>
                        </view>
                        <view class="">
                            <view class="member-name">{{ comment.member_name }}</view>
                            <view class="grade">{{ comment.grade | filterGrade}}</view>
                        </view>
                    </view>
                    <view class="time-info">{{ comment.create_time | date }}</view>
                </view>
                <view class="u-p-l-35 u-p-t-20 u-p-r-35">
                    <view class="u-m-b-20 u-line-5">{{ comment.content }}</view>
                    <view class="u-flex u-flex-wrap" v-if="comment.images">
                        <view class="comment-img u-m-r-15 u-m-b-15" v-for="(img, imgIndex) in comment.images" :key="imgIndex">
                            <u-image width="200" height="200" :src="img" @click="handlePreviewImage(comment.images, imgIndex)"></u-image>
                        </view>
                    </view>
                </view>
                <view class="reply-info" v-if="comment.reply_status === 1 && comment.reply">
                    <view class="reply-line u-rela">
                        <text class="reply-line-txt u-abso"></text>
                    </view>
                    <view class="u-p-t-20">
                        <text>商家回复：</text>
                        <view class="u-line-5">{{ comment.reply.content }}</view>
                    </view>
                </view>
                <view class="" v-if="comment.additional_comment && comment.additional_comment.audit_status === 'PASS_AUDIT'">
                    <view class="u-flex u-row-between u-p-l-35">
                        <view class="">追评信息</view>
                        <view class="time-info">{{ comment.additional_comment.create_time | date }}</view>
                    </view>
                    <view class="u-p-l-35 u-p-t-20 u-p-r-35">
                        <view class="u-m-b-20 u-line-5">{{ comment.additional_comment.content }}</view>
                        <view class="u-flex u-flex-wrap" v-if="comment.additional_comment.images">
                            <view class="comment-img u-m-r-15 u-m-b-15" v-for="(img, imgIndex) in comment.additional_comment.images" :key="imgIndex">
                                <u-image width="200" height="200" :src="img" @click="handlePreviewImage(comment.additional_comment.images, imgIndex)"></u-image>
                            </view>
                        </view>
                    </view>
                    <view class="reply-info" v-if="comment.additional_comment.reply_status === 1 && comment.additional_comment.reply">
                        <view class="reply-line u-rela">
                            <text class="reply-line-txt u-abso"></text>
                        </view>
                        <view class="u-p-t-20">
                            <text>商家回复：</text>
                            <view class="u-line-5">{{ comment.additional_comment.reply.content }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </mescroll-body>
	</view>
</template>

<script>
    import * as API_Member from '@/api/members.js'
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"

	export default {
        mixins: [MescrollMixin],
		data() {
			return {
                goods_id: '',
                params: {
                    page_no: 1,
                    page_size: 10
                },
                commentsList: [],
                down: {
                    auto: false //是否在初始化完毕之后自动执行一次下拉刷新的回调
                }
			}
		},
        onLoad(options) {
            this.goods_id = options.goods_id
        },
        filters: {
              /** 评分 */
              filterGrade(val) {
                switch (val) {
                  case 'bad':
                    return '差评'
                  case 'neutral':
                    return '中评'
                  default:
                    return '好评'
                }
              }
            },
		methods: {
            //图片预览
            handlePreviewImage(images, index) {
                uni.previewImage({
                    current: index,
                    urls: images
                })
            },
            //上拉加载数据
            upCallback(page){
                this.params.page_no = page.num
                this.getGoodsComments()
            },
            //下拉刷新
            downCallback(){
                this.params.page_no = 1
                this.commentsList = []
                this.getGoodsComments()
            },
            // 获取商品评价
            getGoodsComments() {
                API_Member.getGoodsComments(this.goods_id, this.params).then(response => {
                    const { data } = response
                    if (data && data.length) {
                        this.commentsList = this.commentsList.concat(data)
                    }
                    this.mescroll.endBySize(data.length, response.data_total)
                }).catch(error => {
                    this.mescroll.endErr()
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
    .goods-comments {
        .comments-info {
            background-color: #FFFFFF;
            border-radius: 20rpx;
            padding: 20rpx;
            margin: 20rpx 0;
            .comment-img {
                border-radius: 10rpx;
                overflow: hidden;
            }
            .grade-info {
                margin: 10rpx 30rpx;
            }
            .member-name {
                font-size: 31rpx;
            }
            .grade {
                color: #909399;
                font-size: 25rpx;
            }
        }
        .time-info, .reply-info {
            color: #999999;
            font-size: 24rpx;
            padding: 20rpx 30rpx;
            .reply-line {
                height: 2rpx;
                border-top: 2rpx solid #F7F7F7;
                .reply-line-txt {
                    top: -24rpx;
                    border: 12rpx solid;
                    border-color: transparent transparent #F7F7F7;
                }
            }
        }
    }
</style>
